<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <title>SPRINGX商务管理系统</title>
</head>
<body>
<div class="row">
    <div class="col-xs-12 col-sm-6 widget-container-col ui-sortable">
        <!-- #section:custom/widget-box -->
        <div class="widget-box">
            <div class="widget-header">
                <h5 class="widget-title">SPRINGX产品介绍</h5>

                <!-- #section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">
                    <div class="widget-menu">
                        <a href="#" data-action="settings" data-toggle="dropdown">
                            <i class="ace-icon fa fa-bars"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
                            <li>
                                <a data-toggle="tab" href="#dropdown1">Option#1</a>
                            </li>

                            <li>
                                <a data-toggle="tab" href="#dropdown2">Option#2</a>
                            </li>
                        </ul>
                    </div>

                    <a href="#" data-action="fullscreen" class="orange2">
                        <i class="ace-icon fa fa-expand"></i>
                    </a>

                    <a href="#" data-action="reload">
                        <i class="ace-icon fa fa-refresh"></i>
                    </a>

                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>

                    <a href="#" data-action="close">
                        <i class="ace-icon fa fa-times"></i>
                    </a>
                </div>

                <!-- /section:custom/widget-box.toolbar -->
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <ul>
                        <li>SPRINGX-O (open source) 开源版</li>

                        <p>简介</p>

                        <p>
                            开源技术大杂烩,在springside4的基础上建立的一套完善的shiro权限管理系统</li>
                        </p>

                        <p>内置功能</p>

                        <p>
                            完善的基于界面配置的shiro权限管理功能
                        </p>


                        <li>SPRINGX-D(distribution) 分布式版</li>

                        <p style="color:red;font-weight: bold">SPRINGX-D企业级分布式开发框架使用spring零配置的优势将各种开源项目整合在一起,架构与业务进行有效
                            分离,架构升级基本不影响业务代码,屏蔽掉了技术难度,开发入门低.会spring就会开发,架构容易管理,技术
                            主流.可满足未来5-10年的技术需求.以SPRINGX-D为基础开发的主平台系统可以作为一个公司的核心平台,管
                            控所有后台业务系统,REST OPEN PLATFORM组件提供了淘宝TOP开放平台类似的设计,为你的移动开发保驾护航.
                            如果你的企业处于技术转型期或者技术选型期, SPRINGX-D将是你的不二之选</p>
                        <p>内置功能</p>

                        <p>用户管理：用户是系统操作者，该功能主要完成系统用户配置。
                            机构管理：配置系统组织机构，树结构展现。
                            区域管理：国家、省市、地市、区县的维护。
                            菜单管理：配置系统菜单，操作权限等。
                            角色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。
                            字典管理：对系统中经常使用的一些较为固定的数据进行维护，如：是否、男女、类别、级别等。
                            操作日志：系统正常操作日志记录和查询；系统异常信息日志记录和查询。
                            连接池监视：监视当期系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。
                        </p>
                        <li>SPRINGX-D技术工具选型</li>

                        <p>IntelliJ IDEA 开发工具 Git版本控制
                            Maven构建工具 Nexus依赖仓库
                            RabbitMQ消息服务 Mongodb存储
                            Redis/Ehcache缓存切换 Dubbox服务治理
                            Shiro权限管理 Mybatis
                            Druid数据源 FastDFS/NFS静态文件存储
                            Disconf统一配置 Spring Boot 微服务
                            Nginx/Zookeeper负载均衡</p>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>



    <div class="col-xs-12 col-sm-6 widget-container-col ui-sortable">
        <!-- #section:custom/widget-box -->
        <div class="widget-box">
            <div class="widget-header">
                <h5 class="widget-title">内置功能</h5>

                <!-- #section:custom/widget-box.toolbar -->
                <div class="widget-toolbar">

                    <a href="#" data-action="fullscreen" class="orange2">
                        <i class="ace-icon fa fa-expand"></i>
                    </a>

                    <a href="#" data-action="reload">
                        <i class="ace-icon fa fa-refresh"></i>
                    </a>

                    <a href="#" data-action="collapse">
                        <i class="ace-icon fa fa-chevron-up"></i>
                    </a>

                    <a href="#" data-action="close">
                        <i class="ace-icon fa fa-times"></i>
                    </a>
                </div>

                <!-- /section:custom/widget-box.toolbar -->
            </div>

            <div class="widget-body">
                <div class="widget-main">
                    <ul>
                        <li>用户管理：系统用户配置。</li>
                        <li>角色管理：角色资源权限分配。</li>
                        <li>资源管理：配置系统菜单，操作权限等。</li>
                        <li>机构管理：配置系统组织机构，树结构展现。</li>
                        <li>地区管理：系统城市区域模型，如：国家、省市、地市、区县的维护。</li>
                        <li>字典管理：对系统中经常使用的一些较为固定的数据进行维护，如：是否、男女、类别、级别等。</li>
                        <li>操作日志：系统操作日志记录和查询；系统异常信息日志记录和查询。</li>
                        <li>独立演示：静态文件下载演示、Rest演示、WebService演示、日志级别在线调整演示。</li>
                        <li>演示说明：Redis、定时调度等功能说明。</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /section:custom/widget-box -->
    </div>




    <div class="col-xs-12 col-sm-6 widget-container-col ui-sortable">
        <div class="widget-box widget-color-blue">
            <!-- #section:custom/widget-box.options -->
            <div class="widget-header">
                <h5 class="widget-title bigger lighter">
                    <i class="ace-icon fa fa-table"></i>
                    自定义窗口
                </h5>

                <div class="widget-toolbar widget-toolbar-light no-border">
                    <select id="simple-colorpicker-1" class="hide">
                        <option selected="" data-class="blue" value="#307ECC">#307ECC</option>
                        <option data-class="blue2" value="#5090C1">#5090C1</option>
                        <option data-class="blue3" value="#6379AA">#6379AA</option>
                        <option data-class="green" value="#82AF6F">#82AF6F</option>
                        <option data-class="green2" value="#2E8965">#2E8965</option>
                        <option data-class="green3" value="#5FBC47">#5FBC47</option>
                        <option data-class="red" value="#E2755F">#E2755F</option>
                        <option data-class="red2" value="#E04141">#E04141</option>
                        <option data-class="red3" value="#D15B47">#D15B47</option>
                        <option data-class="orange" value="#FFC657">#FFC657</option>
                        <option data-class="purple" value="#7E6EB0">#7E6EB0</option>
                        <option data-class="pink" value="#CE6F9E">#CE6F9E</option>
                        <option data-class="dark" value="#404040">#404040</option>
                        <option data-class="grey" value="#848484">#848484</option>
                        <option data-class="default" value="#EEE">#EEE</option>
                    </select>
                </div>
            </div>

            <!-- /section:custom/widget-box.options -->
            <div class="widget-body">
                <div class="widget-main no-padding">
                    <table class="table table-striped table-bordered table-hover">
                        <thead class="thin-border-bottom">
                        <tr>
                            <th>
                                用户
                            </th>

                            <th>
                                邮件
                            </th>
                            <th class="hidden-480">状态</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td class="">Alex</td>

                            <td>
                                <a href="#">alex@email.com</a>
                            </td>

                            <td class="hidden-480">
                                <span class="label label-warning">Pending</span>
                            </td>
                        </tr>

                        <tr>
                            <td class="">Fred</td>

                            <td>
                                <a href="#">fred@email.com</a>
                            </td>

                            <td class="hidden-480">
                                <span class="label label-success arrowed-in arrowed-in-right">Approved</span>
                            </td>
                        </tr>

                        <tr>
                            <td class="">Jack</td>

                            <td>
                                <a href="#">jack@email.com</a>
                            </td>

                            <td class="hidden-480">
                                <span class="label label-warning">Pending</span>
                            </td>
                        </tr>

                        <tr>
                            <td class="">John</td>

                            <td>
                                <a href="#">john@email.com</a>
                            </td>

                            <td class="hidden-480">
                                <span class="label label-inverse arrowed">Blocked</span>
                            </td>
                        </tr>

                        <tr>
                            <td class="">James</td>

                            <td>
                                <a href="#">james@email.com</a>
                            </td>

                            <td class="hidden-480">
                                <span class="label label-info arrowed-in arrowed-in-right">Online</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- page specific plugin scripts -->
<script src="${ctx}/resources/ace/dist/js/jquery-ui.custom.min.js"></script>
<script src="${ctx}/resources/ace/dist/js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#simple-colorpicker-1').ace_colorpicker({pull_right: true}).on('change', function () {
            var color_class = $(this).find('option:selected').data('class');
            var new_class = 'widget-box';
            if (color_class != 'default')  new_class += ' widget-color-' + color_class;
            $(this).closest('.widget-box').attr('class', new_class);
        });


        // scrollables
        $('.scrollable').each(function () {
            var $this = $(this);
            $(this).ace_scroll({
                size: $this.attr('data-size') || 100
                //styleClass: 'scroll-left scroll-margin scroll-thin scroll-dark scroll-light no-track scroll-visible'
            });
        });

        $('.scrollable-horizontal').each(function () {
            var $this = $(this);
            $(this).ace_scroll(
                    {
                        horizontal: true,
                        styleClass: 'scroll-top',//show the scrollbars on top(default is bottom)
                        size: $this.attr('data-size') || 500,
                        mouseWheelLock: true
                    }
            ).css({'padding-top': 12});
        });

        $(window).on('resize.scroll_reset', function () {
            $('.scrollable-horizontal').ace_scroll('reset');
        });


        $('#id-checkbox-vertical').prop('checked', false).on('click', function () {
            $('#widget-toolbox-1').toggleClass('toolbox-vertical')
                    .find('.btn-group').toggleClass('btn-group-vertical')
                    .filter(':first').toggleClass('hidden')
                    .parent().toggleClass('btn-toolbar')
        });

        /**
         //or use slimScroll plugin
         $('.slim-scrollable').each(function () {
					var $this = $(this);
					$this.slimScroll({
						height: $this.data('height') || 100,
						railVisible:true
					});
				});
         */


        /**$('.widget-box').on('setting.ace.widget' , function(e) {
					e.preventDefault();
				});*/

        /**
         $('.widget-box').on('show.ace.widget', function(e) {
					//e.preventDefault();
					//this = the widget-box
				});
         $('.widget-box').on('reload.ace.widget', function(e) {
					//this = the widget-box
				});
         */

            //$('#my-widget-box').widget_box('hide');


            // widget boxes
            // widget box drag & drop example
        $('.widget-container-col').sortable({
            connectWith: '.widget-container-col',
            items: '> .widget-box',
            handle: ace.vars['touch'] ? '.widget-header' : false,
            cancel: '.fullscreen',
            opacity: 0.8,
            revert: true,
            forceHelperSize: true,
            placeholder: 'widget-placeholder',
            forcePlaceholderSize: true,
            tolerance: 'pointer',
            start: function (event, ui) {
                //when an element is moved, it's parent becomes empty with almost zero height.
                //we set a min-height for it to be large enough so that later we can easily drop elements back onto it
                ui.item.parent().css({'min-height': ui.item.height()})
                //ui.sender.css({'min-height':ui.item.height() , 'background-color' : '#F5F5F5'})
            },
            update: function (event, ui) {
                ui.item.parent({'min-height': ''})
                //p.style.removeProperty('background-color');
            }
        });


    });
</script>
</body>